<template>
  <div class="city_merchant_store">
    <c-title :hide="false" :text="'我的门店'"></c-title>
    <van-tabs v-model="active" @change="TabChange" v-if="store_income_show">
      <van-tab title="今日" name="1"></van-tab>
      <van-tab title="本月" name="2"></van-tab>
      <van-tab title="今年" name="3"></van-tab>
      <van-tab title="全部" name="4"></van-tab>
    </van-tabs>
    <div class="storeOption" v-if="store_income_show">
      <div class="optionsP" @click="order_sum_orderTap">
        <span>营业额</span>
        <div class="con_i">
          <i class="iconfont icon-xia roll " :class="[order_sum_order == 'desc' ? 'rd' : '']"></i>
          <i class="iconfont icon-xia" :class="[order_sum_order == 'desc' ? '' : 'rd']"></i>
        </div>
      </div>
      <div class="optionsP" @click="reward_sum_orderTap">
        <span>核销提成</span>
        <div class="con_i">
          <i class="iconfont icon-xia roll" :class="[reward_sum_order == 'desc' ? 'rd' : '']"></i>
          <i class="iconfont icon-xia" :class="[reward_sum_order == 'desc' ? '' : 'rd']"></i>
        </div>
      </div>
      <div class="districtBox" v-if="!istype" @click="show = true">{{ district_id ? district : "地区筛选" }}<i class="iconfont icon-fontclass-shaixuan"></i></div>
    </div>
    <div class="list">
      <div class="lis" v-for="(item, index) in infoData" :key="index" @click="toStore(item.id)">
        <div class="top" v-if="!istype">
          <div class="top_l">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="top_r">
            <div class="top_r_t">{{ item.store_name }}</div>
            <div class="top_r_b">
              <div class="top_r_b_address"><i class="iconfont icon-dizhi1"></i>{{ item.address }}</div>
              <i class="iconfont icon-icon_more1"></i>
            </div>
          </div>
        </div>
        <div class="top" v-else>
          <div class="top_l">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="top_r">
            <div class="top_r_t">{{ item.store_name }}</div>
            <div class="top_r_b">
              <div class="top_r_b_address"><i class="iconfont icon-dizhi1"></i>{{ item.full_address }}</div>
              <i class="iconfont icon-icon_more1"></i>
            </div>
          </div>
        </div>
        <div class="bottom" v-if="store_income_show">
          <div class="bottom_l">门店营业额：¥{{ item.order_sum }}</div>
          <div class="bottom_l">门店预约核销提成：¥{{ item.reward_sum }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" round>
      <van-picker title="选择地区" show-toolbar :columns="area_list" :value-key="'areaname'" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin"; //引入加载更多
export default {
  mixins: [scrollMixin],
  data() {
    return {
      page: 1,
      total_page: 0,
      infoData: [],
      order_sum_order: "desc",
      reward_sum_order: "desc",
      district_id: "",
      area_list: [],
      show: false,
      active: 1,
      store_income_show: 1,
      istype: 0
    };
  },
  activated() {
    if (this.$route.params.type) {
      this.istype = this.$route.params.type;
    }
    this.district_id = "";
    this.getData();
  },
  computed: {
    district() {
      let name = "地区筛选";
      if (this.area_list.length > 0) {
        for (let i = 0; i < this.area_list.length; i++) {
          if (this.area_list[i].id == this.district_id) {
            name = this.area_list[i].areaname;
            break;
          }
        }
      }
      return name;
    }
  },
  methods: {
    TabChange() {
      console.log(this.active);
      this.page = 1;
      this.getData();
    },
    onConfirm(e) {
      this.district_id = e.id;
      this.page = 1;
      this.getData();
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    toStore(id) {
      this.$router.push(this.fun.getUrl("HomeSeller", { store_id: id, fromHome: 1 }));
    },
    order_sum_orderTap() {
      if (this.order_sum_order == "desc") {
        this.order_sum_order = "asc";
      } else {
        this.order_sum_order = "desc";
      }
      this.page = 1;
      this.getData();
    },
    reward_sum_orderTap() {
      if (this.reward_sum_order == "desc") {
        this.reward_sum_order = "asc";
      } else {
        this.reward_sum_order = "desc";
      }
      this.page = 1;
      this.getData();
    },
    async getData() {
      let urlstr = "plugin.city-merchant.frontend.index.storeList";
      let json = {
        time_type: this.active,
        order_sum_order: this.order_sum_order,
        reward_sum_order: this.reward_sum_order,
        page: this.page
      };
      if (this.istype == 1) {
        urlstr = "plugin.merchant.frontend.store.list.storeListByStaff";
      } else {
        json.district_id = this.district_id;
      }
      let { data, msg, result } = await $http.get(urlstr, json, "");
      if (result) {
        if (this.istype == 1) {
          this.store_income_show = data.store_income_show;
          this.infoData = data.store_list.data;
          this.total_page = data.store_list.last_page;
          this.isLoadMore = true;
        } else {
          this.infoData = data.data;
          this.total_page = data.last_page;
          this.area_list = data.area_list;
          this.isLoadMore = true;
        }
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let urlstr = "plugin.city-merchant.frontend.index.storeList";
        let json = {
          time_type: this.active,
          order_sum_order: this.order_sum_order,
          reward_sum_order: this.reward_sum_order,
          page: this.page
        };
        if (this.istype == 1) {
          urlstr = "plugin.merchant.frontend.store.list.storeListByStaff";
        } else {
          json.district_id = this.district_id;
        }
        let { data, msg, result } = await $http.get(urlstr, json, "");
        this.isLoadMore = true;
        if (result) {
          if (this.istype == 1) {
            this.infoData = this.infoData.concat(data.store_list.data);
          } else {
            this.infoData = this.infoData.concat(data.data);
          }
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0.75rem;
  overflow: hidden;
  .lis {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.63rem;
    margin-bottom: 0.63rem;
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.81rem;
      margin-top: 0.75rem;
      border-top: 1px solid #f0f0f1;
      .bottom_l {
        flex: 1;
        font-weight: 500;
        font-size: 0.88rem;
        text-align: left;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      .top_l {
        width: 3rem;
        height: 3rem;
        margin-right: 0.63rem;
        img {
          width: 3rem;
          height: 3rem;
          background: #ececec;
          border-radius: 0.5rem;
        }
      }
      .top_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
        .top_r_t {
          font-weight: bold;
          font-size: 0.94rem;
        }
        .top_r_b {
          display: flex;
          color: #6e6e79;
          margin-top: 0.41rem;
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
          .top_r_b_address {
            font-size: 0.81rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #6e6e79;

            .icon-dizhi1 {
              font-size: 0.8rem;
              color: #6e6e79;
            }
          }
          .icon-icon_more1 {
            font-size: 0.7rem;
            color: #aaaab3;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}
.storeOption {
  display: flex;
  padding: 0.94rem 0.75rem;
  .districtBox {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.81rem;
    .icon-fontclass-shaixuan {
      font-weight: bold;
      font-size: #6e6e79;
    }
  }
  .optionsP {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2.7rem;
    span {
      color: #000000;
      font-size: 0.81rem;
    }
    .con_i {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #aaaab3;
      margin-left: 0.19rem;
      .roll {
        transform: rotate(180deg);
      }
      .icon-xia {
        font-size: 0.7rem;
        line-height: 0.4rem;
      }
      .rd {
        color: #f15353;
      }
    }
  }
}
</style>
